<template>
  <ul class="chatlistUL" style="overflow-y:auto ;" ref="chatListDom">
    {{ props.chatListRes.length == 0 ? '当前无数据' : '' }}
    <!-- <el-button @click="filterChatList">刷新{{ activeItem }}</el-button> -->
    <template v-if="listToday.length">
      <div>今天</div>
      <li v-for="item in listToday" :key="item.id"
      :class="route.query.chatId == item.id ? 'active' : ''" 
        @click="selectChat(item.id)">
        <div class="chatList-left">
          <!-- <div
          v-if="isPut && route.query.chatId === item.id"
          >
            <img :src="dialogue" alt="图标">
            <span>{{ item.question }}</span>
          </div> -->
          <div
          v-if="!item.isPut"
          >
            <img :src="dialogue" alt="图标">
            <span
            style="width:8em;"
            >
            {{item.question.length > 7 ? item.question.slice(0,7) + '...' : item.question }}
          </span>
          </div>
          <!-- 边框没有取消掉 -->
          <el-input
           v-else-if="item.isPut"
           @blur="item.isPut = false;putChat(item.id,item.question)"
           @focus="item.isPut = true;"
           autofocus="true"
          style="border: red;" input-style="outline:none;border:none;" v-model="item.question" />
          <!-- <input style="height: 100%;" type="text" maxlength="20" :value="item.question"> -->
        </div>
        <div class="chat-list-right">
          <img style="width: 1.5em;" v-if="route.query.chatId == item.id" src="@/assets/img/menu/putIng.png" alt="改" @click="item.isPut = true">
          <img style="width: 1.5em;" v-if="route.query.chatId == item.id" src="@/assets/img/menu/delImg.png" alt="删" @click="delChatID(item.id)">
        </div>
      </li>
    </template>
    <template v-if="listRecent.length">
      <div>最近</div>
      <li :class="route.query.chatId == item.id ? 'active' : ''" v-for=" item in listRecent" :key="item.id"
        @click="selectChat(item.id)">
        <div class="chatList-left">
          <!-- <div
          v-if="isPut && route.query.chatId === item.id"
          >
            <img :src="dialogue" alt="图标">
            <span>{{ item.question }}</span>
          </div> -->
          <div
          v-if="!item.isPut"
          >
            <img :src="dialogue" alt="图标">
            <span
            style="width:8em;"
            >
            {{item.question.length > 7 ? item.question.slice(0,7) + '...' : item.question }}
          </span>
          </div>
          <!-- 边框没有取消掉 -->
          <el-input
           v-else-if="item.isPut"
           @blur="item.isPut = false;putChat(item.id,item.question)"
           @focus="item.isPut = true;"
           autofocus="true"
          style="border: red;" input-style="outline:none;border:none;" v-model="item.question" />
          <!-- <input style="height: 100%;" type="text" maxlength="20" :value="item.question"> -->
        </div>
        <div class="chat-list-right">
          <img style="width: 1.5em;" v-if="route.query.chatId == item.id" src="@/assets/img/menu/putIng.png" alt="改" @click="item.isPut = true">
          <img style="width: 1.5em;" v-if="route.query.chatId == item.id" src="@/assets/img/menu/delImg.png" alt="删" @click="delChatID(item.id)">
        </div>
      </li>
    </template>
    <li>
      没有更多了...
    </li>
  </ul>
</template>
<script lang='ts' setup>

import {defineEmits, onBeforeUnmount, onMounted, ref, watch ,nextTick, computed } from 'vue'
import { isToday } from '@/utils/strLength';
import { ChatList } from '@/api/chat';
import dialogue from '@/assets/img/menu/dialogue.png'
import {useRoute} from 'vue-router'
// import { ElButton } from 'element-plus';
const route = useRoute()

const props =  defineProps({
  chatListRes: Array,
})



const emit = defineEmits(['clickChat','delChat','putChat','getChat'])

//选中聊天 切换会话ID
const selectChat = (id:any)=>{
  emit('clickChat', id)
}

const delChatID = (id:string)=>{
  emit('delChat', id)
}

//是否编辑
const isPut = ref(true)
const putChat = (id:string,question:string)=>{
  console.log('修改了数据',id,question);
  // if(question.length > 20){
  //   ElNotification({
  //     type:'error',
  //     message:'字数超限'
  //   })
  // }
  emit('putChat',{id,question})
}

const chatListDom = ref<HTMLElement>(null)
onMounted(()=>{
  chatListDom.value?.scrollTo(0,chatListDom.value.scrollHeight)
  // filterChatList()
  //触底加载
  chatListDom.value.addEventListener('scroll', handleScroll);
})

function handleScroll(e:Event) {
  console.log('触底加载',e);
  
  const { scrollTop, scrollHeight, clientHeight } = chatListDom.value;
  const threshold = 0; // 触底阈值（像素）
  if (scrollTop + clientHeight >= scrollHeight - threshold) {
  console.log('触底加载发送');

    emit('getChat')
  }
}

 onBeforeUnmount(()=>{
  if (chatListDom.value) {
    chatListDom.value.removeEventListener('scroll', handleScroll);
  }
}) 



// watch(() => props.chatListRes, (newValue,old)=>{
//   console.log('watch数据更新');
//   console.log(newValue,old);
//   filterChatList()
// })

// 数据清洗 今天和最近
// const listToday = ref([])
// const listRecent = ref([])



const listToday = computed(() => props.chatListRes?.filter(v => isToday(v.updated)))
const listRecent = computed(() => props.chatListRes?.filter(v => !isToday(v.updated)))

const activeItem = computed(()=>{
  // return props.chatListRes?.splice(0,1)[0].id
  // console.log(props.chatListRes?.splice(0, 1)[0].id);
})



// const filterChatList = () => {
  // nextTick(() => {
  //   console.log('更新视图');
  // })
  // console.log('触发更新');
//   if (props.chatListRes){
//     activeItem.value =  props.chatListRes[0].id 
//   }  
//   listToday.value = props.chatListRes?.filter(v => isToday(v.created))
//   listRecent.value = props.chatListRes?.filter(v => !isToday(v.created))
//   console.log(listToday.value);
//   console.log(listRecent.value);
// }


</script>
<style scoped lang='scss'>
.chatlistUL{
  width: 100%;
  height: 100%;
}

.chatlistUL  li {
   display: flex;
  //  background-color: aqua;
  border:1px solid transparent;
  border-radius: 5px;
  margin: 5px;

  justify-content: space-between;
  padding:  0 5px;
  height: 40px;
  .chatList-left{
    display: flex;
    align-items: center;
    // flex-direction: column;
    overflow: hidden;
    justify-content:start ;
    >div{
      display: flex;
      height: 100%;
      flex: 1;
      justify-content: start;
      align-items: center;
      >span{
        // background-color: #c90000;
        margin-left: 1em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 隐藏内容的末尾添加省略号 */
        display: -webkit-box; /* 使用弹性布局 */
  -webkit-line-clamp: 1; /* 最多显示一行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
      
      }
    }
  }
  .chat-list-right{
    width: 50px;
    display: flex;
    align-items: center;
  }
 }

    .chatlistUL li:hover {
      border: 1px solid #c90000;
      cursor: pointer;
    }

.active{
  border: 1px solid #c90000 !important;
}

.el-input__inner {
  outline: none;
  border: none;
}
</style>
